<template>
<div class="swiper">
     <div class='list-item'  v-for="(house,index) in houses" :key="index">
         <router-link :to="`/homeStay/${house.shopId}`" class='product'>
            <div class="card">
                <div class="card-header">
                    <div class="card-image">
                        <img :src="house.shopCover" alt="酒店名字">
                    </div>
                </div>
                <div class="card-footer">
                    <div class="card1-title">                       
                    {{house.shopName}}
                    </div>
                    <div class="card-bottom"><span class='price'>{{house.shopMark}}</span></div>
                </div>                
            </div>
            <div class="card-location">
                <i></i>
                <scan class='location'>地址：{{house.shopLocation}}</scan>
            </div>
            <p class='location' style="padding-left:9px">联系方式：{{house.shopPhone}}</p>
        </router-link>
    </div>
</div>
   
</template>
<script>
export default {
    name:'House',
    data(){
        return{
            input:'',
            houses:null,
        }
    },
    mounted(){
        this.hotel()
    },
    methods:{
        // 遍历数据
        hotel(){
            this.$http({
                url:'/shops/home/tag/showShopByLabel',
                method:'get',                
                params:{
                    label:'酒店'
                }
            }).then(data => {
                this.houses = data.data.data.slice(0,3)
            }).catch(err => {
                console.log(err);
            })
        },
    }
}
</script>
<style lang="less" scoped>
    .swiper{
        display: flex;
    }
    .list-item{
        padding: 10px 8px;
        width: 33%;
        background: #f1f1f1;
        margin-right: 10px;
        .product{
            text-decoration: none;
            color: #333;
            .card{
                padding: 8px 8px 12px;
                flex-grow: 1;
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                .card-header{
                    position: relative;
                    width: 100%;
                    height: 215px;
                    .card-image{
                        width: 100%;
                        height: 100%;
                    }
                    img{
                        height: 100%;
                        width: 100%;
                        background: #ff4d6a;
                    }
                }
                .card-footer{
                    margin: 12px 0;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    flex: 1 0 auto;
                    .card1-title{
                        float: left;
                        font-size: 16px;
                        // line-height: 20px;
                        // font-weight: 500;
                        color: #252626;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                       
                        text-overflow: ellipsis;
                        text-overflow: -o-ellipsis-lastline;
                    }                    
                    .card-bottom{
                        margin-top: 13px;
                        white-space: nowrap;
                        position: relative;
                        span{
                            font-family: MThom,X-LocaleSpecific-Sans,Arial,sans-serif;
                            font-size: 24px;
                            color: #ff4d6a;
                            float: left;
                        }
                    }
                }
            }
            .card-location{
                padding: 8px;
                display: flex;
            }
        }
    }
</style>